<template>
    <div>
        <wd-header title="修改密码">
            <span class="iconfont" @click="goback" slot="left">&#xe697;</span>
        </wd-header>
        <div class="form">
            <p>
                <i class="iconfont">&#xe618;</i>
                <input type="password" placeholder="输入旧密码" v-model="old_pwd" ref="old_pwd">
            </p>
            <p>
                <i class="iconfont">&#xe618;</i>
                <input type="password" placeholder="输入新密码" v-model="new_pwd" ref="new_pwd" maxlength="16">
            </p>
            <p>
                <i class="iconfont">&#xe618;</i>
                <input type="password" placeholder="确认新密码" v-model="pwd_again" ref="pwd_again" maxlength="16">
            </p>
        </div>
        <div class="change">
            <button @click="changepwd"  :class="[old_pwd ? 'not_empty' : '']">确定</button>
        </div>
    </div>
</template>
<script>
export default {
    name: 'changepassword',
    data() {
        return {
            old_pwd: null,
            new_pwd: null,
            pwd_again: null,
            auth: JSON.parse(localStorage.user),
            changeurl: 'http://www.jydsapp.com/jydsApi/api/h5/user/modifyPassword'
        }
    },
    methods: {
        goback() {
            this.$router.go(-1)
        },
        changepwd() {

            if (!this.old_pwd) {
                this.$Toast({
                    content: '请输入旧密码'
                })
                this.$refs.old_pwd.focus()
            } else if (!this.new_pwd) {
                this.$Toast({
                    content: '请输入新密码'
                })
                this.$refs.new_pwd.focus()
            } else if (this.new_pwd != this.pwd_again) {
                this.$Toast({
                    content: '两次密码输入不一致'
                })
                this.$refs.pwd_again.focus()
            } else {
                this.change()
            }
        },
        change() {
            let str = `{"phoneNum":"${this.auth.user.phoneNum}","token":"${this.auth.token}","password":"${this.old_pwd}","newPassword":"${this.new_pwd}"}`
            this.fetch({
                method: 'post',
                url: this.changeurl,
                params: {
                    "paramStr": str
                }
            }).then((response) => {
                let res = response.data
                if (res.code == 200) {
                    this.$Toast({
                        content: '密码修改成功'
                    })
                    setTimeout(() => {
                        this.$router.replace('./login')
                    }, 1000)
                } else if (res.code == 103) { //五天内未登录 token失效跳转到登陆页面
                    localStorage.removeItem('user')
                    this.$Toast({
                        content: '请重新登录'
                    })
                    this.$router.replace('/login')
                } else {
                    this.$Toast({
                        content: res.message
                    })
                }
            }).catch((error) => {
                this.$Toast({
                    content: error.data.message
                })
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.form {
    display: flex;
    flex-direction: column;
    padding: 0 0.740741rem;
    margin-top: 0.833333rem;
    p {
        border-bottom: 1px solid #999;
        display: flex;
        margin-bottom: 0.37037rem;
        padding: 0.185185rem 0;
        .iconfont {
            color: #000
        }
        input {
            flex: 1;
            padding-bottom: 0.185185rem;
            text-align: center;
            background: none;
            transform: translateX(-0.259259rem)
        }
    }
}

.change {
    padding: 0 0.740741rem;
    margin-top: 0.462963rem;
    display: flex;
    button {
        color: #aaa;
        flex: 1;
        padding: 0.185185rem 0;
        background: none;
        border: 1px solid #aaa;
        border-radius: 0.148148rem;
    }

    button.not_empty{
        border: 1px solid #fe4f4a;
        color: #fe4f4a;
        transition: all .5s;
    }
}
</style>
